<template>
    <div>
        <el-row class="mt-20">
            <saleheader></saleheader>
        </el-row>
        <el-row class="mt-20">
            <saleroom></saleroom>
        </el-row>
        <el-row class="mt-20">
            <el-col class="mt-21">
                <Salestop></Salestop>
            </el-col>
        </el-row>

        <el-row class="mt-20" :gutter="20">
            <el-col :span="16" class="mt-21">
                <salesmonth></salesmonth>
            </el-col>
            <el-col :span="8" class="mt-21">
                <demopie></demopie>
            </el-col>
        </el-row>

    </div>
</template>
  
<script setup>

import saleheader from './demo/saleheader.vue'
import saleroom from './demo/saleroom.vue'
import salesmonth from './demo/salesmonth.vue'
import demopie from './demo/demopie.vue'
import Salestop from './demo/salestop.vue';
import { ref } from 'vue'



</script>
  
<style lang="scss" scoped>
.mt-20 {
    margin-top: 20px;

}

.mt-21 {
    box-shadow: 0 0 2px #ccc;
}
</style>